<script setup>
    import {computed, defineProps, onMounted} from 'vue'


    const props = defineProps(['shopCart'])

    const checkedShopCartList = computed(()=>{
        return props.shopCart.list.filter((item)=> item.checked)
    })

    const checkedShopCartCount = computed(()=>{
        return checkedShopCartList.value.reduce((sum,item)=> sum+=item.number,0)
    })
    onMounted(()=>{
        console.log(checkedShopCartList.value);
    })
</script>

<template>
    <div class="card">
        <div class="card_shop_name">{{props.shopCart.name}}</div>
        <div class="card_list">
            <div class="card_list_item" v-for="item in checkedShopCartList" :key="item.title">
                <div class="card_list_item_img">
                    <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
                </div>
                <div class="card_list_item_content">
                    <div class="card_list_item_content_title">{{item.title}}</div>
                    <div class="card_list_item_content_price">
                        <span class="highlight">￥{{item.price}} x {{item.number}}</span>
                        <span>￥{{(item.price*item.number).toFixed(2)}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card_total">共计{{checkedShopCartCount}}件</div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.card {
    margin: .18rem;
    padding: .18rem;
    background-color: $bgColor;

    &_shop_name {
        line-height: .42rem;
        font-size: .16rem;
        margin-bottom: .18rem;
    }

    &_list {
        &_item {
            display: flex;
            margin-bottom: .18rem;

            &_img {
                width: .48rem;
                margin-right: .18rem;
                img {
                    width: .48rem;
                    height: .48rem;
                }
            }
            &_content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                &_title {
                    font-size: .14rem;
                    font-weight: bold;
                    color: $content_fontcolor;
                    @include ellipse;
                }
                &_price {
                    display: flex;
                    justify-content: space-between;

                    .highlight {
                        color: $hightlight-fontColor;
                    }
                }
            }
        }
    }

    &_total {
        line-height: .26rem;
        text-align: center;
        font-size: .14rem;
        color: $light-fontColor;
        background-color: $search-bgColor;
    }
}
</style>